<template>
  <div class="employees">
    <!-- 上方按钮 -->
    <el-card class="card">
      <div class="btn">
        <el-button type="primary" size="small">导入</el-button>
        <el-button
          type="primary"
          size="small"
        ><i class="el-icon-plus" /> 新增员工</el-button>
      </div>
    </el-card>
    <!-- 下方表格、页码 -->
    <el-card class="box-card">
      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="序号" width="120">
          <template slot-scope="{ $index }">
            {{ (page.page - 1) * page.size + ($index + 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="username" sortable label="姓名" width="120" />
        <el-table-column prop="mobile" sortable label="手机号" width="200" />
        <el-table-column prop="workNumber" sortable label="工号" width="120" />
        <el-table-column
          prop="formOfEmployment"
          sortable
          label="聘用形式"
          width="150"
          :formatter="formatter"
        />
        <el-table-column
          prop="departmentName"
          sortable
          label="部门"
          width="120"
        />
        <el-table-column
          prop="timeOfEntry"
          sortable
          label="入职时间"
          width="120"
        />
        <el-table-column prop="enableState" sortable label="状态" width="100" />
        <el-table-column fixed="right" label="操作" width="300">
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="page">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[1, 2, 5, 10, 100, 200]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { sysUser } from '@/api/employees.js'
import employeesData from '@/api/constant/employees.js'

export default {
  data() {
    return {
      // 表格数据
      list: [{}],
      // 页码数据
      page: {
        page: 1,
        size: 5,
        total: 200
      }
    }
  },

  created() {
    this.getData()
  },

  methods: {
    // 页容量改变
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
      this.getData()
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.page.page = page
      this.getData()
    },
    // 获取页面数据
    async getData() {
      const res = await sysUser(this.page)
      // console.log(res)
      this.list = res.data.rows
      this.page.total = res.data.total
    },
    // 转换聘用形式内容
    formatter(row, column, cellValue, index) {
      const results = employeesData.hireType.find((item) => {
        if (item.id === cellValue) { 
          return item
        }
      })

      return results ? results.value : '-'
    }
  }
}
</script>

<style lang="scss" scoped>
.employees {
  margin: 15px;
  .card {
    margin-bottom: 15px;
    .btn {
      text-align: right;
    }
  }
  .page {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
